<template>
  <div>
    <myheaders></myheaders>
    <br /><br />
    <!-- 面包屑导航 -->
    <Breadcrumb :datas="datas"></Breadcrumb>
    <br /><br />
    <section class="featured-block text-center">
      <div class="container">
        <center>
          <div>
            商品名称：<input type="text" v-model="name" /> <br />
            <br />
            商品价格：<input type="text" v-model="price" /> <br />
            <br />
            商品分类：<select id="select"
              ><option
                v-for="(item, index) in cate_list"
                :key="index"
                :value="item.id"
                >{{ item.cname }}</option
              ></select
            >
            <br /><br />
            商品标签：
            <TagInput
              v-model="tags"
              type="string"
              split=","
              placeholder="请输入标签，点击回车确认"
            ></TagInput>
            <br /><br />
            商品简介：
            <!-- 富文本编辑器 -->
            <quillEditor :content="desc" @change="editorchange"></quillEditor
            ><br /><br />
            颜色：<input type="text" v-model="color" /> <br />
            <br />
            型号：<input type="text" v-model="size" /> <br /><br />
            季节：<input type="text" v-model="season" /> <br />
            <br />
            商品头图：<input type="file" id="img" /> <br />
            <br />
            演示视频：<input type="file" id="video" /> <br />
          </div>
          <br /><br />
          <Button color="green" @click="update">确认更改</Button>
        </center>
      </div>
    </section>
    <myfooters></myfooters>
  </div>
</template>


 
<script>
// 导入头部组件
import myheader from "./myheader";
// 导入尾部组件
import myfooter from "./myfooter";
// 引入富文本编辑器
import { quillEditor } from "vue-quill-editor";
// 引入编辑器样式
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  data() {
    return {
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "商品详情", route: { name: "item" } },
        { title: "商品修改" }
      ],
      cate_list: [],
      name: "",
      price: "",
      desc: "",
      color: "",
      size: "",
      season: "",
      tags: "",
      //   商品id
      gid: ""
    };
  },
  mounted: function() {
    //   请求分类接口
    this.axios({
      url: "http://localhost:8000/CategoryInfo/"
    }).then(res => {
      this.cate_list = res.data;
    });

    // 请求商品信息接口
    var gid = this.$route.query.gid;
    this.axios({
      url: "http://localhost:8000/goodsinfo/",
      params: { gid: gid }
    }).then(res => {
      this.name = res.data.data.name;
      this.color = res.data.data.color;
      this.desc = res.data.data.desc;
      this.price = res.data.data.price;
      var params = JSON.parse(res.data.data.param);
      this.color = params.color;
      this.season = params.season;
      this.size = params.size;
    });
    // 请求商品标签详情
    this.axios({
      url: "http://localhost:8000/gettags/",
      params: { gid: gid }
    }).then(res => {
      //   赋值
      var tags = res.data;
      if (tags != null) {
        if (typeof tags.tags == "object") {
          this.tags = tags.tags.join(",");
        }
        if (typeof tags.tags == "string") {
          this.tags = tags.tags;
        }
      } else {
        this.tags = "暂无标签";
      }
    });
  },
  methods: {
    // 编辑器更改
    editorchange: function({ editor, html, text }) {
      this.desc = html;
    },
    // 修改商品信息
    update: function() {
      var gid = this.$route.query.gid;
      // 拼接商品规格
      var param = {};
      param["color"] = this.color;
      param["size"] = this.size;
      param["season"] = this.season;
      //   格式化字符串
      param = JSON.stringify(param);

      //   声明参数类型
      let formData = new FormData();
      // 查找文件对象
      var img = document.getElementById("img").files[0];
      var video = document.getElementById("video").files[0];
      var sel = document.getElementById("select");
      //   添加文件及商品信息
      formData.append("name", this.name);
      formData.append("price", this.price);
      formData.append("desc", this.desc);
      formData.append("param", param);
      formData.append("img", img);
      formData.append("video", video);
      formData.append("cid", sel.value);
      formData.append("gid", gid);
      if (img) {
        if (video) {
          this.axios({
            url: "http://localhost:8000/addgoods/",
            method: "options",
            data: formData
          }).then(res => {
            this.$Message(res.data.msg);
            this.$router.push("/item?gid=" + gid);
          });
          this.axios({
            url: "http://localhost:8000/inserttags/",
            method: "options",
            data: { tags: this.tags, gid: gid }
          }).then(res => {});
        } else {
          this.$Message("请选择演示视频");
        }
      } else {
        this.$Message("请选择商品头图");
      }
    }
  },
  //   定义组件
  components: {
    myheaders: myheader,
    myfooters: myfooter,
    quillEditor: quillEditor
  }
};
</script>
 
<style>
/* 控制编辑器高度 */
.ql-editor {
  height: 200px;
}
</style>